<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理面板 - 龙天彪个人主页</title>
    <meta name="description" content="个人主页管理面板，用于更新内容和查看统计数据">
    <meta name="robots" content="noindex, nofollow">
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Styles -->
    <link rel="stylesheet" href="styles.css">
    
    <style>
        .admin-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .admin-header {
            background: var(--bg-primary);
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 15px var(--shadow);
            margin-bottom: 2rem;
            text-align: center;
        }
        
        .admin-header h1 {
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }
        
        .admin-header p {
            color: var(--text-secondary);
        }
        
        .admin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        
        .admin-card {
            background: var(--bg-primary);
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 15px var(--shadow);
            border: 1px solid var(--border-color);
        }
        
        .admin-card h3 {
            color: var(--text-primary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .admin-card h3 i {
            color: var(--accent);
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
            font-weight: 500;
        }
        
        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            background: var(--bg-primary);
            color: var(--text-primary);
            transition: border-color 0.3s ease;
        }
        
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--accent);
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }
        
        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        
        .btn-primary {
            background: var(--accent);
            color: white;
        }
        
        .btn-primary:hover {
            background: var(--accent-hover);
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 2px solid var(--border-color);
        }
        
        .btn-secondary:hover {
            background: var(--border-color);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: var(--bg-primary);
            padding: 1.5rem;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 2px 10px var(--shadow);
            border: 1px solid var(--border-color);
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--accent);
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        .back-to-site {
            position: fixed;
            top: 20px;
            left: 20px;
            background: var(--accent);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            z-index: 1000;
        }
        
        .back-to-site:hover {
            background: var(--accent-hover);
            transform: translateY(-2px);
        }
        
        .login-form {
            max-width: 400px;
            margin: 5rem auto;
            background: var(--bg-primary);
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 10px 30px var(--shadow);
        }
        
        .login-form h2 {
            text-align: center;
            color: var(--text-primary);
            margin-bottom: 2rem;
        }
        
        .alert {
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            display: none;
        }
        
        .alert-success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #a7f3d0;
        }
        
        .alert-error {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #fca5a5;
        }
        
        .hidden {
            display: none;
        }
        
        @media (max-width: 768px) {
            .admin-container {
                padding: 1rem;
            }
            
            .admin-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .back-to-site {
                position: static;
                display: inline-block;
                margin-bottom: 2rem;
            }
        }
    </style>
</head>
<body>
    <!-- 返回网站按钮 -->
    <a href="index.html" class="back-to-site">
        <i class="fas fa-arrow-left"></i> 返回网站
    </a>

    <!-- 登录表单 -->
    <div id="login-form" class="login-form">
        <h2>管理面板登录</h2>
        <div id="login-alert" class="alert"></div>
        <form id="login">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit" class="btn btn-primary" style="width: 100%;">登录</button>
        </form>
    </div>

    <!-- 管理面板内容 -->
    <div id="admin-content" class="admin-container hidden">
        <!-- 管理面板标题 -->
        <div class="admin-header">
            <h1><i class="fas fa-cog"></i> 管理面板</h1>
            <p>管理个人主页内容和查看统计数据</p>
        </div>

        <!-- 统计数据 -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number" id="total-visits">0</div>
                <div class="stat-label">总访问量</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="today-visits">0</div>
                <div class="stat-label">今日访问</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="unique-visitors">0</div>
                <div class="stat-label">独立访客</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="avg-session">0</div>
                <div class="stat-label">平均会话时长(分钟)</div>
            </div>
        </div>

        <!-- 管理功能网格 -->
        <div class="admin-grid">
            <!-- 个人信息管理 -->
            <div class="admin-card">
                <h3><i class="fas fa-user"></i> 个人信息</h3>
                <form id="personal-info-form">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" name="name" value="龙天彪">
                    </div>
                    <div class="form-group">
                        <label for="title">职位</label>
                        <input type="text" id="title" name="title" value="物联网工程专业大三学生">
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email" value="your-email@example.com">
                    </div>
                    <div class="form-group">
                        <label for="phone">电话</label>
                        <input type="tel" id="phone" name="phone" value="+86 138-0000-0000">
                    </div>
                    <div class="form-group">
                        <label for="location">地址</label>
                        <input type="text" id="location" name="location" value="北京市海淀区中关村大街">
                    </div>
                    <button type="submit" class="btn btn-primary">保存更改</button>
                </form>
            </div>

            <!-- 技能管理 -->
            <div class="admin-card">
                <h3><i class="fas fa-code"></i> 技能管理</h3>
                <form id="skills-form">
                    <div class="form-group">
                        <label for="skills">技能列表 (用逗号分隔)</label>
                        <textarea id="skills" name="skills" placeholder="C/C++, Python, 嵌入式开发, 单片机, 传感器技术...">C/C++, Python, 嵌入式开发, 单片机, 传感器技术, 无线通信, Arduino, STM32, 物联网协议, Linux</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">更新技能</button>
                </form>
            </div>

            <!-- 项目管理 -->
            <div class="admin-card">
                <h3><i class="fas fa-project-diagram"></i> 项目管理</h3>
                <form id="project-form">
                    <div class="form-group">
                        <label for="project-title">项目标题</label>
                        <input type="text" id="project-title" name="title" placeholder="项目名称">
                    </div>
                    <div class="form-group">
                        <label for="project-description">项目描述</label>
                        <textarea id="project-description" name="description" placeholder="项目描述..."></textarea>
                    </div>
                    <div class="form-group">
                        <label for="project-tech">技术栈 (用逗号分隔)</label>
                        <input type="text" id="project-tech" name="tech" placeholder="Arduino, ESP8266, 传感器...">
                    </div>
                    <div class="form-group">
                        <label for="project-category">项目分类</label>
                        <select id="project-category" name="category">
                            <option value="iot">物联网</option>
                            <option value="embedded">嵌入式</option>
                            <option value="web">Web应用</option>
                            <option value="mobile">移动应用</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">添加项目</button>
                </form>
            </div>

            <!-- 博客管理 -->
            <div class="admin-card">
                <h3><i class="fas fa-blog"></i> 博客管理</h3>
                <form id="blog-form">
                    <div class="form-group">
                        <label for="blog-title">文章标题</label>
                        <input type="text" id="blog-title" name="title" placeholder="文章标题">
                    </div>
                    <div class="form-group">
                        <label for="blog-excerpt">文章摘要</label>
                        <textarea id="blog-excerpt" name="excerpt" placeholder="文章摘要..."></textarea>
                    </div>
                    <div class="form-group">
                        <label for="blog-category">文章分类</label>
                        <select id="blog-category" name="category">
                            <option value="iot">物联网</option>
                            <option value="embedded">嵌入式</option>
                            <option value="programming">编程</option>
                            <option value="tutorial">教程</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="blog-tags">标签 (用逗号分隔)</label>
                        <input type="text" id="blog-tags" name="tags" placeholder="Arduino, 传感器, 物联网...">
                    </div>
                    <button type="submit" class="btn btn-primary">添加文章</button>
                </form>
            </div>

            <!-- 主题设置 -->
            <div class="admin-card">
                <h3><i class="fas fa-palette"></i> 主题设置</h3>
                <form id="theme-form">
                    <div class="form-group">
                        <label for="primary-color">主色调</label>
                        <input type="color" id="primary-color" name="primary" value="#4f46e5">
                    </div>
                    <div class="form-group">
                        <label for="accent-color">强调色</label>
                        <input type="color" id="accent-color" name="accent" value="#7c3aed">
                    </div>
                    <div class="form-group">
                        <label for="default-theme">默认主题</label>
                        <select id="default-theme" name="defaultTheme">
                            <option value="light">浅色主题</option>
                            <option value="dark">深色主题</option>
                            <option value="auto">跟随系统</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">应用主题</button>
                </form>
            </div>

            <!-- 数据导出 -->
            <div class="admin-card">
                <h3><i class="fas fa-download"></i> 数据管理</h3>
                <p style="color: var(--text-secondary); margin-bottom: 1rem;">导出和管理网站数据</p>
                <button class="btn btn-secondary" onclick="exportData()">
                    <i class="fas fa-download"></i> 导出访问数据
                </button>
                <button class="btn btn-secondary" onclick="clearData()" style="margin-left: 1rem;">
                    <i class="fas fa-trash"></i> 清除数据
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="script.js"></script>
    <script>
        // 简单的认证系统
        const ADMIN_USERNAME = 'admin';
        const ADMIN_PASSWORD = 'admin123'; // 在实际应用中应该使用更安全的认证方式

        // 检查是否已登录
        function checkAuth() {
            const isLoggedIn = localStorage.getItem('adminLoggedIn') === 'true';
            if (isLoggedIn) {
                showAdminContent();
            } else {
                showLoginForm();
            }
        }

        // 显示登录表单
        function showLoginForm() {
            document.getElementById('login-form').classList.remove('hidden');
            document.getElementById('admin-content').classList.add('hidden');
        }

        // 显示管理内容
        function showAdminContent() {
            document.getElementById('login-form').classList.add('hidden');
            document.getElementById('admin-content').classList.remove('hidden');
            loadStats();
        }

        // 登录处理
        document.getElementById('login').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            if (username === ADMIN_USERNAME && password === ADMIN_PASSWORD) {
                localStorage.setItem('adminLoggedIn', 'true');
                showAdminContent();
                showAlert('登录成功！', 'success');
            } else {
                showAlert('用户名或密码错误！', 'error');
            }
        });

        // 显示提示信息
        function showAlert(message, type) {
            const alert = document.getElementById('login-alert');
            alert.textContent = message;
            alert.className = `alert alert-${type}`;
            alert.style.display = 'block';
            
            setTimeout(() => {
                alert.style.display = 'none';
            }, 3000);
        }

        // 加载统计数据
        function loadStats() {
            const visits = JSON.parse(localStorage.getItem('pageVisits') || '[]');
            const today = new Date().toDateString();
            const todayVisits = visits.filter(visit => new Date(visit.timestamp).toDateString() === today);
            
            // 计算独立访客（基于userAgent的简单实现）
            const uniqueVisitors = new Set(visits.map(visit => visit.userAgent)).size;
            
            // 计算平均会话时长（简单实现）
            const avgSession = visits.length > 0 ? Math.round(visits.length * 2.5) : 0;
            
            document.getElementById('total-visits').textContent = visits.length;
            document.getElementById('today-visits').textContent = todayVisits.length;
            document.getElementById('unique-visitors').textContent = uniqueVisitors;
            document.getElementById('avg-session').textContent = avgSession;
        }

        // 导出数据
        function exportData() {
            const visits = JSON.parse(localStorage.getItem('pageVisits') || '[]');
            const dataStr = JSON.stringify(visits, null, 2);
            const dataBlob = new Blob([dataStr], {type: 'application/json'});
            
            const link = document.createElement('a');
            link.href = URL.createObjectURL(dataBlob);
            link.download = `website-data-${new Date().toISOString().split('T')[0]}.json`;
            link.click();
        }

        // 清除数据
        function clearData() {
            if (confirm('确定要清除所有访问数据吗？此操作不可恢复！')) {
                localStorage.removeItem('pageVisits');
                loadStats();
                alert('数据已清除！');
            }
        }

        // 表单提交处理
        document.getElementById('personal-info-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('个人信息已保存！（实际应用中需要连接到后端）');
        });

        document.getElementById('skills-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('技能列表已更新！（实际应用中需要连接到后端）');
        });

        document.getElementById('project-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('项目已添加！（实际应用中需要连接到后端）');
        });

        document.getElementById('blog-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('文章已添加！（实际应用中需要连接到后端）');
        });

        document.getElementById('theme-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('主题设置已保存！（实际应用中需要连接到后端）');
        });

        // 页面加载时检查认证状态
        document.addEventListener('DOMContentLoaded', function() {
            checkAuth();
        });
    </script>
</body>
</html>
